<!--
 * @Descripttion: 
 * @version: 
 * @Author: wishchan
 * @Date: 2021-12-09 15:15:59
 * @LastEditors: 川杨
 * @LastEditTime: 2022-01-12 11:08:06
-->
<template>
  <div class="business-chart">
    <div class="business-chart-tab">
      <div class="stats-btn-group"></div>
      <el-button class="business-export-btn" type='primary' @click="handlerExportClick" :loading="exportLoading">
        {{ $t('common.base.export') }}
      </el-button>
    </div>
    <bar-chart :chart-data="chartData" v-loading="loading" :is-loading="loading"></bar-chart>
  </div>
</template>
<script>
import BarChart from './BarChart.vue'
export default {
  name: 'mtbt-chart',
  components:{
    [BarChart.name]:BarChart
  },
  props:{
    exportLoading:{
      type:Boolean,
      default:false
    },
    loading:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      chartType:'plan-a',
      chartData:{}
    }
  },
  created() {
  },
  methods: {
    handlerExportClick(){
      this.$emit('export')
    },
    init(data, haveUsers){
      this.getChartData(data, haveUsers)
    },
    formatHours(hours) {
      return `${hours} ${this.$t('common.base.hour1')}`
      let day = parseInt(Math.floor(hours / 24));
      let hour = hours - (day * 24)
      let time = '';
      if (day > 0) time += `${day} ${this.$t('common.base.abbrDay')}`;
      if (hour > 0) time += `${hour.toFixed(1)}${this.$t('common.base.hour1')}`;
      return time;

    },
    getTooltips(data, index, seriesIndex){
      if(this.chartType == 'plan-a'){
        
        return `
          <div class="tooltipTitle">${data[index].mtbtReportDataVOs[seriesIndex].dimensionName || this.$t('report.mtbtChart.no', {name: OEM})}</div>
          <div class="tooltipDetail">MTBT：${data[index].mtbtReportDataVOs[seriesIndex].mtbt}</div>
          <div class="tooltipDetail">${this.$t('report.mtbtChart.failureStopNum')}：${data[index].mtbtReportDataVOs[seriesIndex].faultNum}${this.$t('report.mtbtChart.time')}</div>
          <div class="tooltipDetail">${this.$t('report.mtbtChart.failureStopTime')}：${this.formatHours(data[index].mtbtReportDataVOs[seriesIndex].faultTime)}</div>
          <div class="tooltipDetail">${this.$t('report.mtbtChart.fanOperationNum')}：${data[index].mtbtReportDataVOs[seriesIndex].runningMachinesNumbers}</div>
        `
      }
      return '';
      
    },
    getChartData(data, haveUsers) {
      if(!data)data = [];
      if(this.chartType == 'plan-a'){
        let that = this
        let originData = data[0] ? data[0].mtbtReportDataVOs : []
        let series = []
        // if(haveUsers){
        //   series = (originData || []).map(item=>{
        //     return {type:'bar', name:item.oem,
        //       label: {
        //         show: true, // 开启显示
        //         position: 'top', // 在上方显示
        //         textStyle: { // 数值样式
        //           color: 'black',
        //           fontSize: 16
        //         }
        //       }
        //     }
        //   })
        // }else{
        //   let example = {type:'bar',
        //     label: {
        //       show: true, // 开启显示
        //       position: 'top', // 在上方显示
        //       textStyle: { // 数值样式
        //         color: 'black',
        //         fontSize: 16
        //       }}
        //   }
        //   series = [example, example, example]
        // }
        series = (originData || []).map(item=>{
          return {
            type:'bar', 
            name:item.dimensionName,
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              color: 'auto',
              fontSize: 16
            }
          }
        });
        let dataSource = []
        data.forEach(item=>{
          let oneData = [item.date];
          series.forEach((element, index) => {
            oneData.push(item.mtbtReportDataVOs[index] ? item.mtbtReportDataVOs[index].mtbt : 0)
            // if(haveUsers || (!haveUsers && item.mtbtReportDataVOs[index].oem)){
            // }
          });
          dataSource.push(oneData)
        })
        if(dataSource.length == 0){
          return this.chartData = {}
        }
        this.chartData = {
          legend: {
            show: true,
            type:'scroll'
          },
          tooltip: {
            triggerOn:'mousemove',
            enterable:true,
            formatter: params => {
              return that.getTooltips(data, params.dataIndex, params.seriesIndex)
            }
          },
          dataset: {
            source:dataSource
          },
          xAxis: { type: 'category' },
          yAxis: {
            name: this.$t('report.mtbtChart.yAxis'),
            min: 0,
          },
          series,
          dataZoom: [
            (data.length * series.length) > 30 ? {
              type: 'slider',
              show: true,
              start:1, // 数据窗口范围的起始百分比,表示1%
              end:50,
              xAxisIndex: 0,
              bottom:'10px'
            } : {
              type: 'slider',
              show: false,
              start:1, // 数据窗口范围的起始百分比,表示1%
              end:100,
              xAxisIndex: 0,
              bottom:'10px'
            }]
        };
      }


      // 这里处理饼状图数据
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../business.scss';
.tooltipTitle{
  color:$color-primary-light-6;
  font-size:14px;
}
.tooltipDetail{
  color:orange;
  font-size:12px;
}
</style>
<style lang="scss">
.business-chart{
  .tooltipTitle{
    color:$color-primary-light-6;
    font-size:14px;
  }
  .tooltipDetail{
    color:orange;
    font-size:12px;
  } 
}
</style>